<template>
  <div class="kp">
    <div class="dd">
      <h1>蓝图后台管理系统</h1>
      <div class="dp">

        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>

          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="ruleForm.password2" />
          </el-form-item>
          <el-form-item label="身份" prop="identity">
            <el-select v-model="ruleForm.identity" placeholder="管理员">
              <el-option label="管理员" value="管理员" />
              <el-option label="员工" value="员工" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              注册
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { usepo } from '../utils/usertype';
import { adcc } from '../utils/userapi'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';


const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<usepo>({
  name: '',
  email: '',
  password: '',
  password2: '',
  identity: ''

})

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 10, message: '长度4到10个字符', trigger: 'blur' },
  ],

  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', min: 5, max: 10, message: '邮箱不正确', trigger: 'blur' }
  ],

  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 8, message: '长度3到8个字符', trigger: 'blur' },
  ],
  password2: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 8, message: '长度3到8个字符', trigger: 'blur' },
  ]

})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const obj = { ...ruleForm }
      adcc(obj).then(res => {
        if (res.status == 200) {
          ElMessage({
            message: '注册成功',
            type: 'success',
          })
          console.log(res)
          localStorage.setItem('token', JSON.stringify(res.data))
          router.push('/about')
        } else {
          ElMessage.error('请求失败')
        }
      })
    } else {
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>

<style scoped lang="scss">
.kp {
  width: 100%;
  height: 100%;
  background: url('../assets/bg.jpg');
  background-size: 100%, 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .dd {
    width: 80%;

    h1 {
      color: #ace738;
      text-align: center;
      margin-bottom: 20px;
    }

    .dp {
      width: 40%;
      margin: auto;
      padding: 30px;
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
    }
  }
}
</style>